<template>
	<view class="container">
		<!-- 加载动画 -->
		<gb-loading :loadGif="loadGif" v-if="loading && filteredTableData.length === 0"></gb-loading>
		<!-- 列表 -->
		<view v-if="filteredTableData.length > 0">
			<domain-card-item
				v-for="(item, index) in filteredTableData"
				:key="item.id"
				:item="item"
				@index="index"
				@showMenu="showMenu(index)"
			/>
		</view>
		<!-- 没有数据 -->
		<gb-nothing :nothingImg="nothingImg" v-if="isnothing"></gb-nothing>
		<!-- 浮动按钮 -->
		<view class="floating-button" @click="showAddForms">
			<image src="/static/add.png" class="add-icon"></image>
		</view>
		<!-- 上拉加载 -->
		<gb-more :loadingGif="loadingGif" :hasMore="hasMore" :loading="loading" v-if="filteredTableData.length > 9"></gb-more>
		<!-- 添加框 -->
		<domainAddCardItem
			v-if="showAddForm"
			:protocols="protocols"
			:editItem="editItem"
			@saveAdd="saveAdd"
			@cancelAdd="cancelAdd"
		/>
		<!-- 删除确认框 -->
		<view v-if="showDeleteConfirm" class="delete-confirm-overlay">
			<view class="delete-confirm-container">
				<text class="delete-confirm-text">确定要删除吗？</text>
				<view class="delete-confirm-buttons">
					<button @click="confirmDelete" class="form-button confirm-button">确认</button>
					<button @click="cancelDelete" class="form-button cancel-button">取消</button>
				</view>
			</view>
		</view>
		
		<!-- 自定义底部导航栏 -->
		<tabber></tabber>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import CardItem from '@/components/card-all/CardItem.vue';
import AddForm from '@/components/card-all/AddForm.vue';
import EditForm from '@/components/card-all/EditForm.vue';
import domainCardItem from '../../components/card-all/domainCardItem.vue';
import domainAddCardItem from '../../components/card-all/domainAddCardItem.vue';
import { show } from '@/utils/index.js';
import { formatDate } from '@/utils/date.js';
import { requestUtil } from '@/utils/request.js';
import {getDameRed, createDameRed, updateDameRed, delDameRed, getDomainIp, createDameIp, delDameRedIp} from '@/api/app.js';
import tabber from '@/components/tabber/tabber.vue';

const loadGif = "/static/loading.gif";
const nothingImg = "/static/nothing.png";
const loadingGif = "/static/loadings.gif";
const isnothing = ref(false);
const hasMore = ref(true);
const loading = ref(true);
const tableData = ref([]);
const showAddForm = ref(false);
const showEditForm = ref(false);
const showDeleteConfirm = ref(false);
const selectedIndex = ref(null);
const editItem = ref({});
const protocols = ref(['http', 'https']);
const filteredTableData = ref([]);

// 加载数据
const loadData = async () => {
	loading.value = true;
	tableData.value = [];
	filteredTableData.value = [];
	try {
		const response = await getDomainIp();
		tableData.value = response || [];
		filteredTableData.value = tableData.value;
		filteredTableData.value = filteredTableData.value.map(item => ({
			...item
		}));
		isnothing.value = filteredTableData.value.length === 0;
	} catch (e) {
		console.error("加载数据失败:", e);
		show('加载数据失败，请检查网络或重试', 'none');
	} finally {
		loading.value = false;
	}
};

// 加载更多数据
const loadMoreData = () => {
	if (!hasMore.value || loading.value) return;
	loading.value = true;
	// 模拟加载更多数据
	setTimeout(() => {
		hasMore.value = false; // 假设没有更多数据
		loading.value = false;
	}, 1000);
};

// 下拉刷新
const refreshData = () => {
	loading.value = true;
	isnothing.value = false;
	loadData();
	setTimeout(() => {
		uni.stopPullDownRefresh();
	}, 500);
};

// 显示添加表单
const showAddForms = () => {
	showAddForm.value = true;
	editItem.value = {};
};

// 保存添加
const saveAdd = async () => {

	const { domain, ip } = editItem.value;
	let newItem = {
		domain,
		ip,
	};
	try {
		const response = await createDameIp(newItem);
		console.log("222:"  + JSON.stringify(response));
		newItem.id = response.id;
		
		if (response) {
			tableData.value.push(newItem);
			filteredTableData.value.push(newItem);
			showAddForm.value = false;
			show('添加成功', 'success');
		} else {
			show('添加失败', 'none');
		}
	} catch (e) {
		console.error("添加失败:", e);
		show('添加失败，请检查网络或重试', 'none');
	}
};

// 取消添加
const cancelAdd = () => {
	showAddForm.value = false;
};

// 显示操作菜单
const showMenu = (index) => {
	selectedIndex.value = index;
	uni.showActionSheet({
		itemList: ['删除'],
		success: (res) => {
			showDeleteConfirm.value = true;
		}
	});
};

// 保存修改


// 取消修改
const cancelEdit = () => {
	showEditForm.value = false;
};

// 确认删除
const confirmDelete = async () => {
	if (selectedIndex.value === null) {
		show('删除失败，数据无效', 'none');
		return;
	}
	try {
		const response = await delDameRedIp(filteredTableData.value[selectedIndex.value].id);
		console.log("fff:" + JSON.stringify(response))
		if (response === "delete success") {
			tableData.value = tableData.value.filter(item => item.id !== filteredTableData.value[selectedIndex.value].id);
			filteredTableData.value = filteredTableData.value.filter(item => item.id !== filteredTableData.value[selectedIndex.value].id);
			showDeleteConfirm.value = false;
			show('删除成功', 'success');
		} else {
			show('删除失败', 'none');
		}
	} catch (e) {
		console.error("删除失败:", e);
		show('删除失败，请检查网络或重试', 'none');
	}
};

// 取消删除
const cancelDelete = () => {
	showDeleteConfirm.value = false;
};

// 生命周期钩子
onMounted(() => {
	loadData();
});

// 隐藏系统tabBar
onShow(() => {
	uni.hideTabBar();
});
</script>

<style scoped>
	.container {
		background-color: #f0f2f5;
		min-height: 100vh;
		height: 100%;
		width: 100%;
		padding: 24rpx 0;
		box-sizing: border-box;
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.floating-button {
		position: fixed;
		right: 40rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 100rpx;
		height: 100rpx;
		background: #2d3748;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1), 0 12rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 100;
		
		&:active {
			transform: translateY(-50%) scale(1.05);
			background: #1a202c;
		}
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;
		opacity: 0.9;
	}

	.delete-confirm-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(4px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.delete-confirm-container {
		width: 80%;
		max-width: 600rpx;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 48rpx;
		box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1), 0 16rpx 24rpx rgba(0, 0, 0, 0.1);
		animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4rpx;
			background: #e53e3e;
		}
	}

	.delete-confirm-text {
		font-size: 32rpx;
		color: #2d3748;
		margin-bottom: 48rpx;
		display: block;
		text-align: center;
		font-weight: 600;
	}

	.delete-confirm-buttons {
		display: flex;
		justify-content: center;
		gap: 24rpx;
	}

	.form-button {
		padding: 24rpx 48rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.confirm-button {
		background: #e53e3e;
		color: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(229, 62, 62, 0.3);
		
		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 6rpx 16rpx rgba(229, 62, 62, 0.4);
		}
	}

	.cancel-button {
		background: #f7fafc;
		color: #4a5568;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
		
		&:active {
			background: #edf2f7;
			transform: translateY(-2rpx);
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>